import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'

import Detail from './Detail/Detail.jsx'
export default class Message extends Component {
  state = {
    messageArr: [
      {
        id: '01',
        title: 'message001'
      },
      {
        id: '02',
        title: 'message002'
      },
      {
        id: '03',
        title: 'message003'
      }
    ]
  }
  render () {
    return (
      <div>
        <ul>
          {this.state.messageArr.map(item => {
            return (
              <li key={item.id}>
                {/* 携带params 参数  === 向路由组件传params 参数 */}
                {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>
                  {item.title}
                </Link> */}
                {/* 向路由组件传递 search 参数 */}
                <Link
                  to={`/home/message/detail/?id=${item.id}&title=${item.title}`}
                >
                  {item.title}
                </Link>
                &nbsp;&nbsp;
              </li>
            )
          })}
        </ul>
        <hr />
        {/* 声明接收 params 参数 */}
        {/* <Route
          path='/home/message/detail/:id/:title'
          component={Detail}
        ></Route> */}
        {/* 声明接收 search 参数 ==> 无需声明接收 ==> 正常注册路由即可*/}
        <Route path='/home/message/detail' component={Detail}></Route>
      </div>
    )
  }
}
